<template>
  <div class="sidebar">
    <div class="sidebar-title">导航</div>
    <el-menu :default-active="$route.path" mode="horizontal"  router>
      <template v-for="(list,key) in data">
        <el-menu-item v-if="!list.children" :index="list.path" :key="list.menuId" :route="{path:list.path}">
          {{list.name}}
        </el-menu-item>
        <el-submenu v-else :index="list.path">
          <template slot="title">{{list.name}}</template>
          <el-menu-item :index="val.path" v-for="val in list.children" :key="val.menuId">{{val.name}}</el-menu-item>
          <!--<el-menu-item index="management?type=cityApproval"> 市单位审批</el-menu-item>-->
          <!--<el-menu-item index="management?type=provinceApproval">省单位审批</el-menu-item>-->
          <!--<el-menu-item index="management?type=distribution">分配下发</el-menu-item>-->
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>


<script>
  import {clone} from '../utils/convert'

  const findItem = function (array, path, prop) {
    let result = null
    for (let i = 0, len = array.length; i < len; i++) {
      let item = array[i]
      if (item[prop.path] === path) {
        result = item
        break
      } else if (item[prop.children] && item[prop.children].length > 0) {
        result = findItem(item[prop.children], path, prop)
        if (result) break
      }
    }
    return result
  }
  export default {
    components: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        collapsed: false,
        path: this.$route.path,
        menus: [],
        defaultProps: Object.assign({}, {
          id: 'path',
          text: 'text',
          icon: 'icon',
          children: 'children',
          group: 'group',
          route: 'route',
          type: 'type',
          path: 'path'
        }, this.props)
      }
    },
    watch: {
      data(val) {
        this.menus = clone(val)
      }
    },
    computed: {
      icon() {
        return this.collapsed ? 'toggle--collapsed' : 'toggle--expand'
      }
    },
    methods: {
      toggle() {
        this.collapsed = !this.collapsed
      },
      handleSelect(index) {
        const item = findItem(this.data || [], index, this.defaultProps)
        const regex = /^(http|https):\/\//
        if (item) {
          switch (item[this.defaultProps.type]) {
            case 'blank': // 新窗口打开
              if (regex.test(item[this.defaultProps.path])) {
                window.open(item[this.defaultProps.path])
              } else {
                window.open(`${window.location.pathname}#${item[this.defaultProps.path]}`)
              }
              break
            case 'self': // 内联打开
              if (regex.test(item[this.defaultProps.path])) {
                this.$router.push(`${this.iframe}${encodeURIComponent(item[this.defaultProps.path])}`)
              } else {
                this.$router.push(item[this.defaultProps.path])
              }
              break
            default:
              if (regex.test(item[this.defaultProps.path])) {
                window.open(item[this.defaultProps.path])
              } else {
                this.$router.push(item[this.defaultProps.path])
              }
              break
          }
        }
      },
      /**
       * 过滤左侧显示菜单集合
       * @param d
       */
      filterMenus(d = []) {
        let currentData = clone(d)
        let parentRouter = '/' + this.path.split('/')[1]
        if (parentRouter === '/') {
          this.menus = []
          currentData.map(r => {
            if (r.parentId === '0') {
              r.list = null
              this.menus.push(r)
            }
          })
        } else {
          let forMenus = (da = []) => {
            if (da) {
              da.map(r => {
                if (r.url === parentRouter) {
                  this.menus = r.list
                } else {
                  forMenus(r.list)
                }
              })
            }
          }
          forMenus(currentData)
        }
      }
    },
    mounted() {
      // this.filterMenus(this.data)
      this.menus = clone(this.data)
    },
    created() {
    }
  }
</script>
